<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script type="text/javascript" src="../js/axios.js"></script>
		<script type="text/javascript" src="../js/qs.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.app {
				width: 750px;
				height: 500px;
			}
			
			.portlet-default {
				padding: 20px;
			}
		</style>
	</head>

	<body>
		<div id="app" class="app">
			<div class="portlet-heading portlet-default">
				<h4 class="modal-title text-dark" align="center">
				<span set-lan="html:客户关怀"></span>
			</h4>
				<hr class="border-t-a">
			</div>

			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="来源:">
					<el-col :span="8">
						<el-input type="textarea" autosize v-model="ruleForm.cusfrom"></el-input>
					</el-col>
					<el-col class="line" :span="3" :offset="4">是否公海：</el-col>
					<el-col :span="8">
						<el-radio v-model="ruleForm.radio" label="1">是</el-radio>
					<el-radio v-model="ruleForm.radio" label="2">否</el-radio>
					</el-col>
				</el-form-item>
				<el-form-item label="名称：">

					<el-col :span="8">
						<el-form-item prop="linkman">
							<el-input type="textarea" autosize v-model="ruleForm.linkman"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" :offset="2">
						<el-form-item label="联系方式：" prop="tel">
							<el-input type="textarea" autosize v-model="ruleForm.tel"></el-input>
						</el-form-item>
					</el-col>

				</el-form-item>
				<el-form-item label="需求：">
					<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="ruleForm.demend"></el-input>
				</el-form-item>
				<el-form-item label="备注：">
					<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="ruleForm.more"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button @click="resetForm('ruleForm')">重置</el-button>
					<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>

				</el-form-item>
			</el-form>
		</div>
		<script>
			var vm = new Vue({
				el: ".demo-ruleForm",
				data() {
					return {
						ruleForm: {
							cusfrom: '',
							company: '',
							linkman: '',
							tel: '',
							demend: '',
							radio:'',
							more: ''
						},
						//验证规则
						rules: { //数据源model
							linkman: [{
									required: true,
									message: '请输入联系人',
									trigger: 'blur'
								},
								//长度验证
								{
									min: 2,
									max: 8,
									message: '长度在 3 到 5 个字符',
									trigger: 'blur'
								}
							]
						}

					};
				},
				methods: {
					submitForm(formName) {
						//验证方法
						this.$refs[formName].validate((valid) => {
							if(valid) {
								//post提交数据
								axios.post("/form",
									//参数转换
									Qs.stringify(this.ruleForm, {
										arrayFormat: 'brackets'
									})

								).then(function(v) {
									window.parent.location.href = "/getCustomerty";
								}).catch(function(e) {
									alert("出错了" + e);
								});

							} else {
								console.log('error submit!!');
								return false;
							}
						});

					},
					resetForm(formName) {
						this.$refs[formName].resetFields();
					},
					handleSelect: function(it) {
						console.log(it)
					}
				}

			});
		</script>
	</body>

</html>